<template>
	<view class="uni-steps">
		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
				<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']" v-show="item.detailType=='1'" style="font-size:28rpx !important;">课时</text>
					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']" v-show="item.detailType=='2'" style="font-size:28rpx !important;">考试</text>
					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">
						<span class="desc-text">{{item.desc}}</span>
					</text>
					<cmd-progress :percent="item.study" stroke-color="#1783dd" :stroke-width="12" class="main-jindu" style="margin-top:10rpx;margin-bottom:10rpx;" v-if="item.detailType=='1' && (item.study || item.study==0)"></cmd-progress>
					
					<view class="bottom">
						<span class="iconfont" :class="item.icon" v-show="item.detailType=='1'">{{item.time}}</span> 
						<span class="iconfont" :class="item.icon" v-show="item.detailType=='2'" style="visibility:hidden">{{item.time}}</span> 
						<span class="iconfont" :class="item.icon" v-show="item.detailType=='1' && (item.study || item.study==0)" style="visibility:hidden">{{item.time}}</span> 
						<span class="play" v-show="!content.buyFlag && !content.isTree && content.auditionFlag=='1' && item.detailType=='1'">立即试看</span>
						<span class="play" v-show="(content.buyFlag || content.isTree) && item.detailType=='1'" @tap="goMain('../course/play?id1='+content.privateId+'&id2='+item.id,item.detailType)" :class="{'noClick':!item.studyFlag}">立即观看</span>
						<span class="play" v-show=" item.detailType=='2'"  :class="{'noClick':!item.studyFlag}" @tap="goMain2(item)">开始测试</span>
						<span class="play" v-show=" item.educationCourse.courseType=='6'" @tap="goPPT(item)">开始测试</span>
					</view>
					
<!-- 					<view class="bottom" v-show="options.courseType == '6'">
						<span class="iconfont" :class="item.icon" v-show="item.detailType=='1'">{{item.time}}</span> 
						<span class="iconfont" :class="item.icon" v-show="item.detailType=='2'" style="visibility:hidden">{{item.time}}</span> 
						<span class="iconfont" :class="item.icon" v-show="item.detailType=='1' && (item.study || item.study==0)" style="visibility:hidden">{{item.time}}</span> 
						<span class="play" v-show="!content.buyFlag && !content.isTree && content.auditionFlag=='1' && item.detailType=='1'">立即试看</span>
						<span class="play" v-show="(content.buyFlag || content.isTree) && item.detailType=='1'" @tap="goMain('../course/play?id1='+content.privateId+'&id2='+item.id,item.detailType)" :class="{'noClick':!item.studyFlag}">立即观看</span>
						<span class="play" v-show=" item.detailType=='2'"  :class="{'noClick':!item.studyFlag}" @tap="goMain2(item)">开始测试</span>
					</view> -->
					
				</view>
			</view>
			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options" :key="index" >
					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']" :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
					<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
						<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
					</view>
					<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']" :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../uni-icons/uni-icons.vue'
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import Cookies from 'js-cookie'
	/**
	 * Steps 步骤条
	 * @description 评分组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
	 * @property {Number} active 当前步骤
	 * @property {String} direction = [row|column] 当前步骤
	 * 	@value row 横向
	 * 	@value column 纵向
	 * @property {String} activeColor 选中状态的颜色
	 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
	 */

	export default {
		name: 'UniSteps',
		components: {
			uniIcons,cmdProgress
		},
		props: {
			direction: {
				// 排列方向 row column
				type: String,
				default: 'row'
			},
			activeColor: {
				// 激活状态颜色
				type: String,
				default: '#1aad19'
			},
			deactiveColor: {
				// 未激活状态颜色
				type: String,
				default: '#999999'
			},
			active: {
				// 当前步骤
				type: Number,
				default: 0
			},
			content: {
				// 课程详情
				type: Object,
			},
			options: {
				type: Array,
				default () {
					return []
				}
			} // 数据
		},
		data() {
			return {
				heights:[]
			}
		},
		mounted(){

		},
		methods:{
			goPage(url){
				
				uni.navigateTo({
					url:url
				})
			},
			goMain(url,type,did){
				let obj = {};
				obj.url=url;
				obj.type = type;
				if(type=="2"){
					obj.did = did;
				}
				console.log(obj,89)
				this.$emit('goPlay',obj)
			},
			goMain2(item){
				if (uni.getStorageSync("token")) {
					let obj = {};
					obj.url='../course/test?id='+item.testObj.id;
					obj.type = item.detailType;
					if(item.detailType=="2"){
						obj.did = item.did;
					}
					console.log(obj,89)
					this.$emit('goPlay',obj)
				}else{
					uni.reLaunch({
						url:'../../pages/login/login'
					})
				}
			
			},
			goPPT(item){
				if (uni.getStorageSync("token")) {
					let obj = {};
					obj.url='../course/pptCourse?id='+item.educationCourse.id + "&detailId=" + item.educationDoc.id;
					
					console.log(obj,89)
					this.$emit('goPlay',obj)
				}else{
					uni.reLaunch({
						url:'../../pages/login/login'
					})
				}
			
			},
		}
	}
</script>

<style scoped lang="less">
	.uni-steps {
		/* #ifndef APP-NVUE */
		display: flex;
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row-reverse;
	}

	.uni-steps__row-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-steps__column-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
		width:630rpx;


	}

	.uni-steps__row-text {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
	}

	.uni-steps__column-text {
		padding: 6px 0px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #e5e5e5;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		.bottom{
			width:100%;
			display:block;
			height:50rpx;
			margin-top:10rpx;
			display:flex;
			align-items:center;
			justify-content:space-between;
			margin-bottom:40rpx;
			.iconfont{
				font-size:26rpx;
				color:#444444;
			}
			.iconfont:before{
				margin-right:10rpx;
			}
			.play{
				margin-left:20rpx;
				width:130rpx;
				height:50rpx;
				border-radius:4rpx;
				font-size:26rpx;
				color:#ffffff;
				text-align:center;
				line-height:50rpx;
				background:#1783dd;
			}
		}
	}

	.uni-steps__row-title {
		font-size: 14px;
		line-height: 16px;
		text-align: center;
	}

	.uni-steps__column-title {
		font-size: 14px;
		text-align: left;
		line-height: 18px;
	}

	.uni-steps__row-desc {
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		width:100%;
		overflow: hidden;    
	    text-overflow:ellipsis;    
	    white-space: nowrap;

	    
	}

	.uni-steps__column-desc {
		font-size: 12px;
		text-align: left;
		line-height: 40rpx;
		
		
		color:#444444 !important;
		span{
			width:100%;
			word-wrap:break-word;
		}
	}

	.uni-steps__row-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-steps__column-container {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		width: 30px;
		flex-direction: column;
	}

	.uni-steps__row-line-item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
		height: 14px;
		line-height: 14px;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__column-line-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__row-line {
		flex: 1;
		height: 1px;
		background-color: #999;
	}

	.uni-steps__column-line {
		width: 1px;
		background-color: #999;
	}

	.uni-steps__row-line--after {
		transform: translateX(1px);
	}

	.uni-steps__column-line--after {
		flex: 1;
		transform: translate(0px, 1px);
	}

	.uni-steps__row-line--before {
		transform: translateX(-1px);
	}

	.uni-steps__column-line--before {
		height: 6px;
		transform: translate(0px, -1px);
	}

	.uni-steps__row-circle {
		width: 5px;
		height: 5px;
		border-radius: 100px;
		background-color: #999;
		margin: 0px 3px;
	}

	.uni-steps__column-circle {
		width: 5px;
		height: 5px;
		border-radius: 100px;
		background-color: #999;
		margin: 4px 0px 5px 0px;
	}

	.uni-steps__row-check {
		margin: 0px 6px;
	}

	.uni-steps__column-check {
		height: 14px;
		line-height: 14px;
		margin: 2px 0px;
	}
</style>